<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>BlocklySQL Demo: Generating SQL Code with Blocks</title>
    <script src="../blockly_compressed.js"></script>
    <script src="../blocks_compressed.js"></script>
    <script src="../javascript_compressed.js"></script>
    <script src="../msg/js/en.js"></script>

    <script src="js/sql_blocks/aggregates.js"></script>
    <script src="js/sql_blocks/allchooser.js"></script>
    <script src="js/sql_blocks/and.js"></script>
    <script src="js/sql_blocks/as.js"></script>
    <script src="js/sql_blocks/between.js"></script>
    <script src="js/sql_blocks/boolean.js"></script>
    <script src="js/sql_blocks/compare.js"></script>
    <script src="js/sql_blocks/conditionchooser.js"></script>
    <script src="js/sql_blocks/datepicker.js"></script>
    <script src="js/sql_blocks/free_input.js"></script>
    <script src="js/sql_blocks/from.js"></script>
    <script src="js/sql_blocks/group_by.js"></script>
    <script src="js/sql_blocks/having.js"></script>
    <script src="js/sql_blocks/innifier.js"></script>
    <script src="js/sql_blocks/join.js"></script>
    <script src="js/sql_blocks/limit.js"></script>
    <script src="js/sql_blocks/math.js"></script>
    <script src="../blocks/lists_from.js"></script>
    <script src="../blocks/lists_select.js"></script>
    <script src="js/sql_blocks/not.js"></script>
    <script src="js/sql_blocks/number.js"></script>
    <script src="js/sql_blocks/or.js"></script>
    <script src="js/sql_blocks/order_by.js"></script>
    <script src="js/sql_blocks/select.js"></script>
    <script src="js/sql_blocks/table.js"></script>
    <script src="js/sql_blocks/where.js"></script>

    <script src="js/scripts_functions.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>
        body {
            background-color: #fff;
            font-family: sans-serif;
        }
        h1 {
            font-weight: normal;
            font-size: 140%;
        }
    </style>

</head>

<body style="height: 600px; width: 1200px; margin: auto;">
    <h1>BlocklySQL Demo: Generating SQL Code with Blocks</h1>

    <p hidden id="database">company</p>

    <p>
        <button onclick="showSQLCode()">Show SQLCode</button>
        <button onclick="runSQLCode()">Run SQLCode</button>
    </p>

    <div id="blocklyDiv" style="height: 600px; width: 1200px; margin: auto;"></div>

    <div id="SQLCodeDiv" style="margin-top: 50px;"></div>

    <div id="resultDiv" style="margin-top: 50px;"></div>

    <xml id="toolbox" style="display: none">
        <category name="Statements & clauses" colour="#8007f2">
            <label text="Statements & clauses:" web-class="befehle_commandStyle"></label>
            <block type="lists_select"></block>
            <sep gap="50"></sep>
            <label text="Clauses:" web-class="tabellen_tablesStyle"></label>
            <block type="lists_from"></block>
            <block type="all_join"></block>
            <block type="select_where"></block>
            <block type="select_groupby"></block>
            <block type="select_having"></block>
            <block type="select_orderby"></block>
        </category>
        <category name="Tables & attributes" colour="#f1bf06">
            <label text="Tables:" web-class="tabellen_tablesStyle"></label>
            <block type="table"></block>
            <label text="Attributes:" web-class="tabellen_attributStyle"></label>
            <block type="allchooser"></block>
            <block type="conditionchooser"></block>
        </category>
        <category name="Aliases" colour="#0ddb69">
            <label text="Alias:" web-class="tabellen_aliasesStyle"></label>
            <block type="tablename_as"></block>
        </category>
        <category name="Operators" colour="#4B5ED4">
            <category name="Logical operators" colour="#4B5ED4">
                <label text="Logical operators:" web-class="operatoren_logicStyle"></label>
                <block type="and"></block>
                <block type="or"></block>
                <block type="not"></block>
                <block type="between"></block>
                <block type="innifier"></block>
            </category> -->
            <category name="Mathematical operators" colour="#3ED9D9">
                <label text="Mathematical operators:" web-class="operatoren_mathsStyle"></label>
                <block type="compare"></block>
                <block type="math"></block>
            </category>
        </category>
        <category name="Value inputs" colour="#CC0037">
            <label text="Logical:" web-class="werte_logicStyle"></label>
            <block type="boolean"></block>
            <label text="Numerical:" web-class="werte_numberStyle"></label>
            <block type="number"></block>
            <label text="Date:" web-class="werte_dateStyle"></label>
            <block type="datepicker"></block>
            <label text="Free inputs:" web-class="werte_freesStyle"></label>
            <block type="freeinput"></block>
        </category>
        <category name="Aggregate functions" colour="#C440C4">
            <label text="Aggregate functions:" web-class="aggLabelStyle"></label>
            <block type="aggregate_min"></block>
            <block type="aggregate_avg"></block>
            <block type="aggregate_max"></block>
            <block type="aggregate_sum"></block>
            <block type="aggregate_count"></block>
        </category>
    </xml>

    <script>
        var blocklyArea = document.getElementById('blocklyArea');
        var blocklyDiv = document.getElementById('blocklyDiv');
        var workspace = Blockly.inject('blocklyDiv', {
            media: 'BlocklyCode/media/',
            toolbox: document.getElementById('toolbox'),
            zoom: {
                controls: true,
                wheel: false,
                startScale: 1.0,
                maxScale: 3,
                minScale: 0.3,
                scaleSpeed: 1.2
            },
            trashcan: true
        });
        var onresize = function(e) {
            var element = blocklyArea;
            var x = 0;
            var y = 0;
            do {
                x += element.offsetLeft;
                y += element.offsetTop;
                element = element.offsetParent;
            } while (element);
            blocklyDiv.style.left = x + 'px';
            blocklyDiv.style.top = y + 'px';
            blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
            blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
        };
        window.addEventListener('resize', onresize, true);
        onresize();
        Blockly.svgResize(workspace);

        function showSQLCode() {
            Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
            var code = showCode();
            document.getElementById("SQLCodeDiv").innerHTML = code;
        }

        function runSQLCode() {
            Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
            var code = showCode();
            document.getElementById("SQLCodeDiv").innerHTML = code;

            code = code.replace(/ < /g, 'lessThan ');
            code = code.replace(/ <= /g, 'lessThanEquals ');
            code = code.replace(/<BR>/g, ' ');
            code = code.replace(/  /g, ' ');

            $.ajax({
                type: "POST",
                url: "get.php",
                data: {
                    code: code,
                    database: "company",
                },
                success: function(result) {
                    $('#resultDiv').html(result);
                }
            });
        }
    </script>

</body>

</html>
